<template>
    <div class="user-container">
        <div class="user-content">
            <div class="info">
                <div class="header">
                    <div>
                        <el-avatar :size="100" style="margin-right: 20px;"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    </div>
                    <div style="flex: 1;">
                        <div class="user-name">
                            <div>{{ username }}</div>
                            <el-tag size="small">卖家信用优秀</el-tag>
                            <el-tag size="small">买家信用优秀</el-tag>
                        </div>
                        <div class="user-fav">
                            <div class="fav-item" >
                                <i class="el-icon-user"></i>
                                <span style="margin-left: 5px;">关注 : </span>
                                <span>{{ followCount }}</span>
                            </div>
                            <div class="fav-item">
                                <i class="el-icon-user"></i>
                                <span style="margin-left: 5px;">粉丝 : </span>
                                <span>{{ fansCount }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 20px;">
                    <el-tabs v-model="selectTab">
                        <el-tab-pane label="发布商品" name="goods">
                            <GoodsList :goodsList="goodsList"/>
                        </el-tab-pane>
                        <el-tab-pane label="信用及评价" name="evaluate">
                            <CommentList :commentList="commentList"/>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import GoodsList from '../personalCenter/components/GoodsList.vue';
import CommentList from '../personalCenter/components/CommentList.vue';
    export default {
        name: 'UserCenter',
        components: {
            GoodsList, CommentList
        },
        data() {
            return {
                goodsList: [],
                commentList: [],
                userId: this.$route.params.id,
                selectTab: 'goods',
                username: '',
                followCount: 0,  // 关注数
                fansCount: 0,  // 粉丝数
            }
        },
        mounted() {
          this.getUserInfo()
          this.getCount()
          this.getGoodList()
          this.getComment()
        },
        methods: {
            getUserInfo() {
                this.$axios.get('admin/user/get/' + this.userId).then(res => {
                    if (res.data.code === 200) {
                        this.username = res.data.data.username
                    }
                })
            },
            getCount() {  // 获取关注数和粉丝数
                this.$axios.get('follow/stats/' + this.userId).then(res => {
                    if (res.data.code === 200) {
                        this.followCount = res.data.data.followCount
                        this.fansCount = res.data.data.fansCount
                    }
                })
            },
            getGoodList() {
                this.$axios.get(`goods/user/${this.userId}`).then(res => {
                    if (res.status === 200) {
                        this.goodsList = res.data.data.records
                    }
                })
            },
            getComment() {
                this.$axios.get(`comment/received/${this.userId}`).then(res => {
                    if (res.status === 200) {
                        this.commentList = res.data.data.records
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
.user-container {
    background-color: #f8f8f8;
    min-height: calc(100vh - 60.67px);
    padding: 20px 0;
    box-sizing: border-box;
    .user-content {
        background-color: #fff;
        border-radius: 20px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        width: 60vw;
        max-width: 1000px;
    }
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
    .user-container { 
        .user-content {
            width: 80vw;
        }
    }
}

@media screen and (max-width: 768px) {
    .user-container {
        padding: 0;
        min-height: calc(100vh - 80.67px);
        background-color: #fff;
        .user-content {
            width: 100%;         
            border-radius: 0;
        }
    }
}

.info {
    width: 100%;  
    padding: 20px 40px 40px;
    box-sizing: border-box;
    .header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user-name {
            display: flex;
            align-items: center;
            height: 30px;
            white-space: nowrap;
            line-height: 30px;
            font-weight: bold;
            .el-tag {
                margin-left: 10px;
            }
        }
        .user-fav {
            font-size: 0.85em;
            margin-top: 10px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            .fav-item {
                text-align: left;
            }
        }
    }
}
</style>